<template>
  <div>
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <select-confirm-batch
          placeholder="审核批次"
          @change="getData()"
          @clear="getData()"
          clearable
          v-model="params['apply_batch_no.eq']"
        ></select-confirm-batch>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          class="date-picker-ml"
          v-model="datePicked"
          type="daterange"
          unlink-panels
          range-separator="-"
          start-placeholder="通过时间(开始)"
          end-placeholder="通过时间(截止)"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="handleDateChange"
        ></el-date-picker>
      </el-form-item>
      <!-- <el-form-item>
        <c-select placeholder="项目状态"
                  clearable
                  number-key
                  :options="enumConfirmStatus"
                  v-model="params['is_confirm.eq']"
                  @change="getData()"></c-select>
      </el-form-item> -->
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <confirm-view-dialog
      :visible.sync="viewVisible"
      :batch-data="viewBatchData"
    ></confirm-view-dialog>

    <replace-list
      :visible.sync="replaceVisible"
      :batch-id="batchId"
      :batch-no="batchNo"
    ></replace-list>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { lastPickerShortcuts } from '@/common/plugins/tools/date'

import SelectConfirmBatch from '@/bank/views/limit/confirm/SelectConfirmBatch'
import ConfirmViewDialog from '@/bank/views/limit/confirm/ConfirmViewDialog'
import ReplaceList from '@/bank/views/limit/replace/ReplaceList'
export default {
  components: {
    SelectConfirmBatch,
    ConfirmViewDialog,
    ReplaceList,
  },
  props: {},
  data() {
    return {
      loading: false,
      params: {
        index: 1,
        size: 10,
        'apply_batch_no.eq': '',
        'is_confirm.eq': '',
      },
      order: {
        approval_time: 'desc',
      },
      tableName: 'project_approval_batch_bank',
      tableColumns: [
        { attrs: { label: '审核批次', prop: 'apply_batch_no', align: 'center' } },
        { attrs: { label: '审核数量', prop: 'project_count', align: 'center' } },
        { attrs: { label: '审核总额(万元)', prop: 'project_funds', align: 'center' } },
        {
          attrs: { label: '审核机构', prop: 'person', align: 'center' },
          process: () => '省农担',
        },
        {
          attrs: { label: '通过时间', prop: 'approval_time', align: 'center' },
          process: v => (v || '').substring(0, 10),
        },
        { attrs: { label: '通过数量', prop: 'project_count_approval', align: 'center' } },
        { attrs: { label: '通过金额(万元)', prop: 'project_funds_approval', align: 'center' } },
        { attrs: { label: '应收担保费(元)', prop: 'warranty_fee', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', minWidth: '200px' },
          operations: [
            { name: '替换', event: this.handleReplace },
            { name: '查看', event: this.handleView },
          ],
        },
      ],
      tableData: [],
      tableCount: 0,

      // 提交时间选择
      datePicked: [],
      pickerOptions: {
        shortcuts: lastPickerShortcuts,
      },

      // 查看
      viewVisible: false,
      viewBatchData: {},

      batchId: '',
      replaceVisible: false,
      batchNo: '',
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {},
  created() {
    this.params['submit_client_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    handleReplace(row = {}) {
      this.batchNo = row.apply_batch_no
      this.batchId = row.apply_batch_id || ''
      this.replaceVisible = true
    },
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = (data.data || []).map(this.dataAdapter)
          this.tableCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },

    dataAdapter(item) {
      item.is_confirm = +(item.is_confirm || 0)
      // item.confirmStatusLabel = enumConfirmStatus[item.is_confirm]
      // item.confirmStatusStyle = enumConfirmStatusStyle[item.is_confirm]
      // item.warrantyStatus = enumWarrantyStatus[item.warranty_fee_confirm]
      // item.warrantyStyle = enumWarrantyStyle[item.warranty_fee_confirm]
      return item
    },

    handleDateChange() {
      const [start, end] = this.datePicked || []
      if (start && end) {
        this.params['approval_time.gte'] = start
        this.params['approval_time.lte'] = `${end} 23:59:59`
      } else {
        this.params['approval_time.gte'] = ''
        this.params['approval_time.lte'] = ''
      }
      this.getData()
    },

    handleView(row = {}) {
      this.viewBatchData = row
      this.viewVisible = true
    },

    beforeUpload() {
      return new Promise((resolve, reject) => {
        this.$utils
          .msgbox({
            message: '确定盖章上传（上传后该审核批次将变成已确认）？',
            type: 'warning',
          })
          .then(() => {
            resolve(true)
          })
          .catch(err => {
            reject(err)
          })
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
